<template>
	<view>
		<view class="head-nav">
			<view :class="navIndex==1?'activite':''" @click="checkIndex(1)">新建活动</view>
			<view :class="navIndex==2?'activite':''" @click="checkIndex(2)">现有活动</view>
			<view :class="navIndex==3?'activite':''" @click="checkIndex(3)">历史活动</view>
		</view>
		<view class="content1" v-if="navIndex==1">
			<view class="item">
				<label>活动类型</label>
				<picker @change="bindPickerChange" :value="index" :range="array" range-key="type" class="picker">
					<view>{{array[index].type}} ></view>
				</picker>
			</view>
			<view class="item">
				<label>活动标题</label>
				<text>活动标题活动标题活动标题 ></text>
			</view>
			<view class="item">
				<label>活动简介</label>
				<text>活动简介 ></text>
			</view>
			<view class="item">
				<label>活动开始时间</label>
				<picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange" class="picker">
					<view>{{date}} ></view>
				</picker>
			</view>
			<view class="item">
				<label>活动结束时间</label>
                <text>2021,06,07 ></text>
			</view>
			<view class="item">
				<label>活动对象</label>
				<text>全部用户 ></text>
			</view>
		</view>
		<view class="content2" v-if="navIndex==2">
			<view>
				<view class="item">
					<text>活动类型：{{array[index].type}}</text>
				</view>
				<view class="item">
					<text>活动标题：这是标题这是标题这是标题</text>
				</view>
				<view class="item">
					<text>活动简介：这是简介</text>
				</view>
				<view class="item">
					<text>活动开始时间：2021.03.31  09:30</text>
				</view>
				<view class="item">
					<text>活动结束时间：2021.03.31  09:30</text>
				</view>
				<view class="item">
					<text>活动对象：全部用户</text>
				</view>
				<view class="btn">
					<button type="button" class="btn1">删除</button>
					<button type="button" class="btn2">编辑</button>
				</view>
			</view>
		</view>
		<view class="content2" v-if="navIndex==3">
			<view>
				<view class="item">
					<text>活动类型：{{array[index].type}}</text>
				</view>
				<view class="item">
					<text>活动标题：这是标题这是标题这是标题</text>
				</view>
				<view class="item">
					<text>活动简介：这是简介</text>
				</view>
				<view class="item">
					<text>活动开始时间：2021.03.31  09:30</text>
				</view>
				<view class="item">
					<text>活动结束时间：2021.03.31  09:30</text>
				</view>
				<view class="item">
					<text>活动对象：全部用户</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
function getDate(type){
	const date = new Date();
	let year = date.getFullYear();
	let month = date.getMonth() + 1;
	let day = date.getDate();
	
	if(type === 'start'){
		year = year - 10;
	}else if(type === 'end'){
		year = year + 10
	}
	month = month > 9 ? month: '0' + month;
	day = day > 9 ? day: '0' + day
	return `${year},${month},${day}`
}
export default {
	data(){
      return {
	    navIndex:1,
		array:[{
			type:'活动类型一'
		},
		{
			type:'活动类型二'
		},
		{
			type:'活动类型三'
		}],
		index:0,
		date: getDate({
			format: true
		}),
		startDate: getDate('start'),
		endDate: getDate('end')
	  }
	},
	methods:{
	  checkIndex(index){
	    this.navIndex = index
	  },
	  bindPickerChange: function(e){
		  this.index = e.detail.value
	  },
	  bindDateChange: function(e){
		  this.date=e.detail.value
	  }
	}
}
</script>
<style>
	page {
		background: rgb(245 245, 245);
	}
	.head-nav {
		margin: 0rpx 68rpx 30rpx 67rpx;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		width: 615rpx;
		height: 80rpx;
		line-height: 80rpx;
		font-size: 30rpx;
		background: #FFFFFF;
	}
	.activite {
		font-weight: bold;
		border-bottom: 6rpx solid #FEB140;
	}
    .content1 {
		width: 690rpx;
		height: 520rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
/* 		border: 1px solid #ddd; */
		margin: 0rpx 30rpx 100rpx;
		display: flex;
		flex-direction: column;
	}
	.item {
		width: 650rpx;
	    display: flex;
		flex-direction: row;
		justify-content: space-between;
		text-align: right;
		padding: 20rpx 20rpx;
		border-bottom: 1px solid #E5E5E5;
	}
	.item label {
		font-size: 28rpx;
		color: #1A1A1A;
		font-weight: 400;
	}
	.item text , .picker{
		font-size: 24rpx;
		color: #666666;
	}
	.content2 {
		width: 690rpx;
		height: 657rpx;
		background: #FFFFFF;
		border-radius: 10rpx;
		margin: 30rpx 30rpx 20rpx;
	}
	.btn {
	   display: flex;
	   flex-direction: row;
       margin-top: 30rpx;
	   margin-left: 350rpx;
	}
	.btn1 {
		font-size: 24rpx;
		width: 140rpx;
		height: 40rpx;
		background: #FFFFFF;
		border: 2rpx solid #A0A0A0;
		border-radius: 20rpx;
		line-height: 40rpx;
	}
	.btn2 {
		font-size: 24rpx;
		width: 140rpx;
		height: 40rpx;
		background: #FEB140;
		border-radius: 20rpx;
		line-height: 40rpx;
	}
</style>
